<template>
  <div class="rule1-container">
    <el-dialog
      :visible.sync="dialog"
      :loading="loading"
      :close-on-click-modal="false"
      :title="titleMap[dialogStatus]"
      width="75%"
      left
      @close="closeDlg"
    >
      <div class="app-container">
        <div style="padding-top:5px">
          <el-divider content-position="left">规则1属性</el-divider>
          <el-form ref="ruleInfo" :model="ruleInfo" :inline="true" :rules="rules" size="mini" label-width="auto">
            <el-form-item label="表单名称:" required prop="sheetVariableName">
              <el-select v-model="ruleInfo.sheetVariableName" placeholder="请选择" style="width: 200px;" @change="clearExcel">
                <el-option v-for="item in sheetNames" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-button size="mini" type="primary" icon="el-icon-search" @click="selectSheetColumn">选择表单列</el-button>
            </el-form-item>
            <br>
            <el-form-item label="Excel列号:" prop="rowSite">
              <el-input v-model="ruleInfo.rowSite" size="mini" :validate-event="true" readonly placeholder="只读" style="width: 200px;" @change="selectSite" />
            </el-form-item>
            <el-form-item label="Excel列名:" prop="rowName">
              <el-input v-model="ruleInfo.rowName" size="mini" readonly placeholder="只读" style="width: 200px;" />
            </el-form-item>
            <!-- <el-form-item label="作业类型:" prop="jobType">
              <el-select v-model="ruleInfo.jobType" placeholder="请选择作业类型" style="width: 200px;">
                <el-option
                  v-for="item in optionsJobType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item label="规则业务类:" prop="businessTypeIds">
              <el-select v-model="ruleInfo.businessTypeIds" size="mini" placeholder="可以多选" multiple style="width: 200px;">
                <el-option v-for="item in parent.ruleApplyTypes" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="最小字符长度:" prop="miniCharLength">
              <el-input v-model.number="ruleInfo.miniCharLength" size="mini" type="number" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="最大字符长度:" prop="maxCharLength">
              <el-input v-model.number="ruleInfo.maxCharLength" size="mini" type="number" style="width: 200px;" />
            </el-form-item>
            <!-- <el-form-item label="运行顺序:" prop="exeSeq">
              <el-input v-model.number="ruleInfo.exeSeq" type="number" style="width: 200px;" />
            </el-form-item> -->
            <el-form-item label="生效日期:" required prop="effectiveDate">
              <el-date-picker v-model="ruleInfo.effectiveDate" type="date" size="mini" placeholder="选择日期" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="失效日期:" required prop="expirationDate">
              <el-date-picker v-model="ruleInfo.expirationDate" type="date" size="mini" placeholder="选择日期" style="width: 200px;" />
            </el-form-item>
            <!-- <el-form-item label="是否继续运行:" prop="isRun">
              <el-radio v-model="ruleInfo.isRun" label="1" style="width: 84px;">是</el-radio>
              <el-radio v-model="ruleInfo.isRun" label="0" style="width: 84px;">否</el-radio>
            </el-form-item> -->
            <el-form-item label="例外反馈信息:" prop="exceptionFeedback">
              <el-input v-model="ruleInfo.exceptionFeedback" style="width: 200px;" size="mini" label-position="right" />
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" @click="onSubmit(ruleInfo)">提交</el-button>
              <el-button type="primary" @click="closeDlg">取消</el-button>
            </el-form-item> -->
            <el-form-item label="二次校验:" label-width="200px" required prop="secondCheck">
              <el-radio-group v-model="ruleInfo.secondCheck" size="mini">
                <el-radio v-for="secondCheck in secondChecks" :key="secondCheck.value" :label="secondCheck.value">{{ secondCheck.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12"><div style="text-align:right;"><el-button type="primary" round size="small" @click="onSubmit(ruleInfo)">保存</el-button></div></el-col>
        <el-col :span="12"><div><el-button type="primary" size="small" round @click="closeDlg">取消</el-button></div></el-col>
      </el-row>
      <sheetColumnList ref="sheetColumnList" :parent="parent" @setSheetColumn="setSheetColumn" />
    </el-dialog>
  </div>
</template>

<script>
import { submitRule1Info, insertRule1Info } from '@/api/rule1'
import { Message } from 'element-ui'
import { selCombinationByIndex } from '@/api/excelDataCommon'
import { findRuleSheetNames, findRuleSheetColumnName, findRule3ApplyTypes } from '@/api/rule3'
import sheetColumnList from './../rule3/sheetColumnList'

export default {
  components: {
    sheetColumnList
  },
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      ruleApplyTypes: [{ name: '', value: null }],
      secondChecks: [{ name: '启用', value: 1 }, { name: '禁用', value: 0 }],
      businessTypeIds: '',
      ruleInfo: {
        rowSite: '',
        rowName: '',
        miniCharLength: '',
        maxCharLength: '',
        exeSeq: '',
        isRun: '',
        jobType: '',
        sheetVariableName: '',
        exceptionFeedback: '',
        effectiveDate: '',
        businessTypeIds: '',
        ruleApplyTypes: [{ name: '', value: null }],
        expirationDate: '',
        secondCheck: 0 // 默认禁用二次校验
      },
      loading: false,
      optionsJobType: [],
      sheetNames: [{ name: '', value: null }],
      titleMap: {
        addRule1Map: '新增规则1',
        editRule1Map: '编辑规则1'
      },
      dialogStatus: '',
      rules: { // 表单验证规则
        rowSite: [
          { required: true, message: '请输入Excel对应的列', trigger: 'blur' },
          { min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur,change' }
        ],
        rowName: [
          { required: true, message: '请输入正确的Excel对应列', trigger: 'blur' }
        ],
        // isRun: [
        //   { required: true, message: '请选择是否继续运行', trigger: 'blur' }
        // ],
        // jobType: [
        //   { required: true, message: '请选择作业类型', trigger: 'blur' }
        // ],
        applyType: [
          { required: true, message: '请选择规则作业类', trigger: 'blur' }
        ],
        miniCharLength: [{ type: 'number', min: 0, message: '最小字符长度不能小于0', trigger: 'blur' },
          { required: true, message: '请填写最小字符长度', trigger: 'blur' }],
        maxCharLength: [{ type: 'number', min: 0, message: '最大字符长度不能小于0', trigger: 'blur' },
          { required: true, message: '请填写最大字符长度', trigger: 'blur' }],
        sheetVariableName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }, { required: true, message: '表单名称不能为空', trigger: 'change' }],
        businessTypeIds: [{ required: true, message: '规则业务类不能为空', trigger: 'blur' }, { required: true, message: '规则业务类不能为空', trigger: 'change' }],
        exeSeq: [{ type: 'number', min: 0, message: '运行顺序不能小于0', trigger: 'blur' }
          // { required: true, message: '请填写运行顺序', trigger: 'blur' }
        ],
        effectiveDate: [{ required: true, message: '生效日期不能为空', trigger: 'blur' }, { required: true, message: '生效日期不能为空', trigger: 'change' }],
        expirationDate: [{ required: true, message: '失效日期不能为空', trigger: 'blur' }, { required: true, message: '失效日期不能为空', trigger: 'change' }],
        secondCheck: [{ required: true, message: '二次校验选项不能为空', trigger: 'blur' }, { required: true, message: '二次校验选项不能为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.loadApplyType()
    this.loadSheetName()
  },
  methods: {
    closeDlg() {
      this.dialog = false
    },
    selectColumnIndex: function(val) {
      if (!val) {
        this.ruleInfo.rowName = ''
        return
      }
      val = val.toUpperCase()
      this.ruleInfo.rowSite = val
      findRuleSheetColumnName(this.ruleInfo.sheetName, val).then(res => {
        this.ruleInfo.rowName = res.result
      })
    },
    loadApplyType() {
      findRule3ApplyTypes().then(res => {
        this.ruleApplyTypes = res.result
      })
    },
    selectSheetColumn() {
      if (this.ruleInfo.sheetVariableName === null || this.ruleInfo.sheetVariableName === '') {
        this.$confirm('请选择表单名称！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        })
        return
      }
      const _sheetColumnList = this.$refs.sheetColumnList
      _sheetColumnList.sheetColumnDialogTitle = '表单列名选择'
      _sheetColumnList.dialog = true
      _sheetColumnList.callbackMethod = 'setSheetColumn'
      _sheetColumnList.sheetVariableName = this.ruleInfo.sheetVariableName
    },
    setSheetColumn(val) {
      if (!val) {
        this.ruleInfo.rowName = ''
        return
      }
      this.ruleInfo.rowSite = val.columnIndex
      this.ruleInfo.rowName = val.columnName
    },
    loadSheetName() {
      findRuleSheetNames().then(res => {
        this.sheetNames = res.result
      })
    },
    clearExcel(val) {
      this.ruleInfo.rowSite = ''
      this.ruleInfo.rowName = ''
    },
    selectSite(val) {
      if (!val) {
        this.ruleInfo.rowName = ''
        return
      }
      val = val.toUpperCase()
      this.ruleInfo.rowSite = val
      selCombinationByIndex(val).then(res => {
        this.ruleInfo.rowName = res
      })
    },
    // 提交触发
    onSubmit(ruleInfo) {
      this.$refs.ruleInfo.validate(valid => {
        if (valid) {
          this.loading = true
          this.$confirm('是否保存该rule1信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.ruleInfo.id) {
              submitRule1Info(this.ruleInfo).then(() => {
                this.loading = false
                this.parent.toQuery()
                Message({
                  message: '保存成功。',
                  type: 'success',
                  duration: 3 * 1000
                })
                this.dialog = false
              })
            } else {
              insertRule1Info(this.ruleInfo).then(() => {
                this.loading = false
                this.parent.toQuery()
                Message({
                  message: '保存成功。',
                  type: 'success',
                  duration: 3 * 1000
                })
                this.dialog = false
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.rule1-container .el-form-item--small.el-form-item {
  margin-bottom: 10px
}
.rule1-container .el-form-item--mini.el-form-item {
  margin-bottom: 13px
}
</style>

